<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>减一减 | 登录</title>
    <link rel="stylesheet" type="text/css" href="src/frozenui/1.2.0/css/frozen.css">
    <link rel="stylesheet" type="text/css" href="src/static/demo.css">
    <style type="text/css">
    .login-box {
        margin: 30px 10px 50px 10px;
    }
    h2 center {
        font-weight: bold;
    }
    #head {
        margin-top: 30px;
    }
    .ui-avatar-one {
        width: 100px;
        height: 100px;
    }
    .ui-avatar-one span {
        width: 100px;
        height: 100px;
    }
    .red {
        color: #fd7271;
    }
    .blue {
        color: #00A5E3;
    }
    </style>
</head>
<body>
<!-- 登录页开始 -->
<div id="login">
    <h2 class="title ui-border-b">
        <center>登录</center>
    </h2>
    <div class="content">
        <center>
            <div id="head" class="ui-avatar-one">
                <span id="head-picture"></span>
            </div>
        </center>
        <div class="login-box">
            <div class="ui-form">
            <div class="ui-form-item ui-border-b">
                <label for="username">账号/手机</label>
                <input type="text" name="username" id="username" autocomplete="off" />
                <a id="reset" class="ui-icon-close"></a>
            </div>
            <div class="ui-form-item ui-border-b">
                <label for="password">密码</label>
                <input type="password" name="password" id="password" autocomplete="off" />
                <a id="clearpwd" class="ui-icon-close"></a>
            </div>
            </div>
        </div>
        <div class="go-reg-box">
            <center>没有账号？赶紧 <a href="reg.html"><b class="go-reg">注册</b></a></center>
        </div>
        <div class="ui-btn-wrap">
            <button class="ui-btn-lg ui-btn-primary" id="login-btn">登录</button>
        </div>
    </div>
</div>
<!-- 登录页结束 -->


        
    <!-- javascript开始 -->
    <script src="src/frozenjs/lib/zepto.min.js"></script>
    <script src="src/frozenjs/1.0.1/frozen.js"></script>
    <script>
    $(document).ready(function(){
        //设置主题方法
        function SetTpl(){
            if(localDB.config_face === "blue"){
                $("button").removeClass("ui-btn-danger");
                $("button").addClass("ui-btn-primary");       
                $("h2 > center").css("color", "#00A5E3");
                $(".go-reg").css("color", "#00A5E3");
            }
            else if(localDB.config_face === "red"){
                $("button").removeClass("ui-btn-primary");
                $("button").addClass("ui-btn-danger");
                $("h2 > center").css("color", "#fd7271");
                $(".go-reg").css("color", "#fd7271");
            }
        }
        //切换账号重新登录方法
        function Reset(){
            window.localStorage.clear();
            $("input").val('');
            $("button").removeClass("ui-btn-danger");
            $("button").addClass("ui-btn-primary");
            $("h2 > center").css("color", "#00A5E3");
            $(".go-reg").css("color", "#00A5E3");
            $("#head-picture").hide();
        }
        //加载历史数据
        if(window.localStorage.uid){
            var localDB = window.localStorage;
            $("#username").val(localDB.username);
            $("#head-picture").css("background-image", "url(" + localDB.head + ")");
            SetTpl();    
        }
        //重新登录事件
        $("#reset").click(function(){
            Reset()
        })
        //重新设置密码
        $("#clearpwd").click(function(){
            $("#password").val('');
        })
        //登录
        $("#login-btn").click(function(){
            var localDB = window.localStorage;
            if($("#username").val() === 'lisheng' && $("#password").val() === 'lisheng'){                
                localDB.uid = 1;
                localDB.username = $("#username").val();
                localDB.head = "src/img/male.png";
                localDB.config_face = "blue";
                window.location.href = 'goods-list.html'; 
            }
            else if($("#username").val() === 'xiaohong' && $("#password").val() === 'xiaohong'){
                localDB.uid = 2;
                localDB.username = $("#username").val();
                localDB.head = "src/img/female.png";
                localDB.config_face = "red";
                window.location.href = 'goods-list.html';
            }
        })        
    })
    </script>
</body>
</html>